<template>
    <div v-transfer-dom>
        <popup v-model="propShow"
               width="100%"
               @on-hide="propHide">
            <header>
                <span @click="propHide">取消</span>
                <span @click="confirm"
                      v-if="!single">确定</span>
            </header>
            <div class="content-wrap">
                <noData v-if="theModel.length == 0"></noData>
                <ul class="user-list">
                    <li @click="selectedPersonFn(item)"
                        :class="{'selected':item.selected}"
                        v-for="(item,index) in theModel"
                        :key="index">
                        {{item.realName}}
                        <icon v-if="item.selected"
                              type="success-no-circle"></icon>
                    </li>
                </ul>
            </div>
        </popup>
    </div>
</template>
<script>
import { TransferDom, Popup, Icon } from 'vux'
export default {
    name: 'checkUserProp',
    data () {
        return {
            propShow: false,
            theModel: [],
            userInfo: '',
            selectArr: []
        }
    },
    components: {
        Popup,
        Icon
    },
    directives: {
        TransferDom
    },
    created () {
        this.userInfo = JSON.parse(localStorage.userInfo)
        this.getData()
    },
    props: {
        selectUsers: {
            type: Function
        },
        personPropShow: {
            type: Boolean,
            default: false
        },
        single: { // 是否是单选
            default: false
        }
    },
    watch: {
        personPropShow (newVal) {
            this.propShow = newVal
        }
    },
    methods: {
        getData () {
            let param = {
                'allowPaging': true,
                'business': 'GetDivderPeopleList',
                'data': {
                    'departId': this.userInfo.deptid
                },
                'pageIndex': 0,
                'pageSize': 200,
                'tokenId': this.tokenId,
                'userId': this.userId
            }
            this.$axiosAjax.getConfigJson(
                param
            ).then((res) => {
                this.theModel = res.data.data
            })
        },
        openChild (item) {
            this.$set(item, 'open', !item.open)
        },
        propHide () {
            this.$parent.personPropShow = false
        },
        selectedPersonFn (item) {
            if (this.single) { // 单选
                this.selectUsers(item.realName, item.memberId)
            } else {
                this.$set(item, 'selected', !item.selected)
                for (let i = 0; i < this.selectArr.length; i++) {
                    if (this.selectArr[i].memberId === item.memberId) {
                        this.selectArr.splice(i, 1)
                        return false
                    }
                }
                this.selectArr.push(item)
                this.$forceUpdate()
            }
        },
        confirm () {
            let SendPersons = ''
            let SendPersonsId = ''
            this.selectArr.forEach(item => {
                if (SendPersons) {
                    SendPersons += `,${item.realName}`
                    SendPersonsId += `,${item.memberId}`
                } else {
                    SendPersons += item.realName
                    SendPersonsId += item.memberId
                }
            })
            this.selectUsers(SendPersons, SendPersonsId)
        }
    }
}
</script>
<style scoped>
header {
    display: flex;
    justify-content: space-between;
    line-height: 40px;
    padding: 0 20px;
    background: rgba(0, 0, 0, 0.1);
}
header span:first-child {
    font-size: 14px;
    color: #333;
}
header span:last-child {
    font-size: 14px;
    color: cornflowerblue;
}
.content-wrap {
    height: calc(100% - 40px);
    overflow-y: scroll;
}
.user-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 40px;
    color: #666;
    font-size: 14px;
    padding-left: 10px;
    padding-right: 15px;
}
.user-list ul li:last-child {
    padding-bottom: 0;
}
.user-list li.selected {
    color: #57bc2f;
}
</style>
